<template>
 <div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">基本信息</span>
  
    </div>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>候选人：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{desc_info.candidate_name ? desc_info.candidate_name : '未填'}}</div>
      </el-col>
      <el-col :span="4"><div class='label'>性别:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.gender | genderFilter }}</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>出生年月：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{desc_info.birthday_date | timeFilter('{y}-{m}')  }}</div>
        <!-- | timeFilter('{y}-{m}-{d} {h}:{i}') -->
      </el-col>
      <el-col :span="4"><div class='label'>婚育:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.marriage | marriageFilter }}</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>户籍：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{desc_info.residence | mncCityValFilter  }}</div>
      </el-col>
      <el-col :span="4"><div class='label'>所在城市:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.city | mncCityValFilter }}</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>手机：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{ desc_info.mobile_phone ? desc_info.mobile_phone : "未填" }}</div>
      </el-col>
      <el-col :span="4"><div class='label'>邮箱:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.email ? desc_info.email : "未填"  }}</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>行业：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{ desc_info.industry ? desc_info.industry : "未填" }}</div>
      </el-col>
      <el-col :span="4"><div class='label'>职能:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.function ? desc_info.function : "未填"  }}</div>
      </el-col>
    </el-row>
    <!-- <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>QQ：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{ desc_info.qq ? desc_info.qq : "未填" }}</div>
      </el-col>
      <el-col :span="4"><div class='label'>微信:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.weixin ? desc_info.weixin : "未填"  }}</div>
      </el-col>
    </el-row> -->
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>最高学历：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{ desc_info.highest_diploma | educationBackgroudFilter }}</div>
      </el-col>
      <el-col :span="4"><div class='label'>毕业年月:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.graduation_date |  timeFilter('{y}-{m}') }}</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>语言能力：</div></el-col>
      <el-col :span="8">
        <div v-if="language_level_group" class='content'>
          <span v-for="(item, index) in language_level_group" :key="item" >
            {{ item | languageLevelFilter }}<span v-if="(index+1) !== language_level_group.length">,</span>
          </span> 
        </div>
      </el-col>
      <el-col :span="4"><div class='label'>意向城市:</div></el-col>
      <el-col :span="8">
        <div v-if="preferred_city_group" class='content'>
          <span v-for="(item, index) in preferred_city_group" :key="item" >
            {{ item | mncCityValFilter }}<span v-if="(index+1) !== preferred_city_group.length">,</span>
          </span> 
        </div>
      </el-col>
    </el-row> 
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>当前公司：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{ desc_info.company_name }}</div>
      </el-col>
      <el-col :span="4"><div class='label'>当前部门:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.dept_name }}</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="4"><div class='label'>当前职位：</div></el-col>
      <el-col :span="8">
        <div  class='content'>{{ desc_info.position }}</div>
      </el-col>
      <el-col :span="4"><div class='label'>当前年薪:</div></el-col>
      <el-col :span="8">
        <div class='content'>{{ desc_info.annual_salary }}</div>
      </el-col>
    </el-row>
         <!-- 
        field("industry");
        field("function");
        field("candidate_type");
        field("attachment_url");
        field("attachment_html_url");
        field("create_id");
        field("create_uid");
        field("create_name");
        field("create_date"); -->
  </el-card>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">教育经历</span>
    </div>
    <span v-if="desc_info.education_items" v-for="(item, index) in desc_info.education_items" :key="item.id">
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>学校：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ item.school }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>时间：</div></el-col>
        <el-col :span="8">
          <div  class='content'>从 {{ item.start_date |  timeFilter('{y}-{m}') }} 到 {{ item.end_date |  timeFilter('{y}-{m}') }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>学位：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ item.diploma | educationBackgroudFilter}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>专业：</div></el-col>
        <el-col :span="8">
          <div  class='content'>从 {{ item.major}}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>统招：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ (item.is_unified && item.is_unified === '1') ? '是' : '否' }}</div>
        </el-col>
      </el-row>
      <hr v-if="(index + 1) !== desc_info.education_items.length" style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
    </span> 
  </el-card>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">技能证书</span>
    </div>
    <span  v-for="(item, index) in skill_certificate_group" :key="item">
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>证书{{index + 1}}：</div></el-col>
        <el-col :span="20">
          <div  class='content'>{{ item }}</div>
        </el-col>
      </el-row>
    </span>
  </el-card>  
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">工作经历</span>
    </div>
    <span v-if="desc_info.experience_items" v-for="(item, index) in desc_info.experience_items" :key="item.id">
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>时间：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            <span> 从 {{item.start_date | timeFilter('{y}-{m}')}}</span>
            <span> 到 </span>
            <span v-if="item.is_current && item.is_current ==='1'" >
             至今
            </span>
            <span v-else> {{item.end_date | timeFilter('{y}-{m}')}}</span>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>公司：</div></el-col>
        <el-col :span="20">
          <div  class='content'>{{item.company_name}}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>部门：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ item.dept_name ? item.dept_name: '未填' }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>职位：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ item.position ? item.position: '未填'  }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>汇报对象：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ item.leader ? item.leader: '未填' }}</div>
        </el-col>
        <el-col :span="4"><div class='label'>下属人数：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ item.subordinates_num ? item.subordinates_num: '未填'  }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>工作内容：</div></el-col>
        <el-col :span="20">
          <div  class='content'>{{ item.subordinates_num ? item.subordinates_num: '未填' }}</div>
        </el-col>
      </el-row>    
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>工作业绩：</div></el-col>
        <el-col :span="20">
          <div  class='content'>{{ item.work_performance ? item.work_performance: '未填'  }}</div>
        </el-col>
      </el-row> 
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>离职原因：</div></el-col>
        <el-col :span="20">
          <div  class='content'>{{ item.off_reason ? item.off_reason: '未填'  }}</div>
        </el-col>
      </el-row> 
      <hr v-if="(index + 1) !== desc_info.experience_items.length" style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
    </span> 
  </el-card>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">项目经验</span>
    </div>
    <span v-if="desc_info.product_items" v-for="(item, index) in desc_info.product_items" :key="item.id">
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>时间：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            <span> 从 {{item.start_date | timeFilter('{y}-{m}')}}</span>
            <span> 到 </span>
            <span v-if="item.is_current && item.is_current ==='1'" >
             至今
            </span>
            <span v-else> {{item.end_date | timeFilter('{y}-{m}')}}</span>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>所在公司：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            {{ item.company_name ? item.company_name : '未填'}}
          </div>
        </el-col>
      </el-row>   
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>项目名称：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            {{ item.product_name ? item.product_name : '未填'}}
          </div>
        </el-col>
      </el-row> 
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>项目简介：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            {{ item.product_desc ? item.product_desc : '未填'}}
          </div>
        </el-col>
      </el-row> 
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>项目职务：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            {{ item.product_position ? item.product_position : '未填'}}
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>项目职责：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            {{ item.product_function ? item.product_function : '未填'}}
          </div>
        </el-col>
      </el-row> 
      <el-row type="flex" justify='space-start' :gutter="10"> 
        <el-col :span="4"><div class='label'>项目业绩：</div></el-col>
        <el-col :span="20">
          <div  class='content'>
            {{ item.product_achievement ? item.product_achievement : '未填'}}
          </div>
        </el-col>
      </el-row>     
      <hr v-if="(index + 1) !== desc_info.product_items.length" style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
    </span>  
  </el-card>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">自我介绍</span>
    </div>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="2"><div class='label'></div></el-col>
      <el-col :span="22">
        <div  class='content'>{{ desc_info.self_introduction ? desc_info.self_introduction : '未填' }}</div>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="title">培训经历</span>
    </div>
    <el-row type="flex" justify='space-start' :gutter="10"> 
      <el-col :span="2"><div class='label'></div></el-col>
      <el-col :span="22">
        <div  class='content'>{{ desc_info.training_experience ? desc_info.training_experience : '未填' }}</div>
      </el-col>
    </el-row>
  </el-card>  
 </div>
</template>
<script>
import API from '@/utils/backend_api'
export default {
  name: 'candidateBase',
  props: {
    id: {
      type: String,
      default: '' // 这样可以指定默认的值
    }
  },
  data() {
    return {
      language_level_group: [],
      skill_certificate_group: [],
      preferred_city_group: [],
      desc_info: {}
    }
  },
  filters: {
  },
  watch: {
    id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (val) {
        API.candidate.get(val).then(response => {
          this.desc_info = response.data
          if (this.desc_info.language_level_group) {
            this.language_level_group = JSON.parse(this.desc_info.language_level_group)
          }
          if (this.desc_info.skill_certificate_group) {
            this.skill_certificate_group = JSON.parse(this.desc_info.skill_certificate_group)
          }
          if (this.desc_info.preferred_city_group) {
            this.preferred_city_group = JSON.parse(this.desc_info.preferred_city_group)
          }
        })
      }
    }
  },
  created() {
    if (this.id) {
      API.candidate.get(this.id).then(response => {
        this.desc_info = response.data
        if (this.desc_info.language_level_group) {
          this.language_level_group = JSON.parse(this.desc_info.language_level_group)
        }
        if (this.desc_info.skill_certificate_group) {
          this.skill_certificate_group = JSON.parse(this.desc_info.skill_certificate_group)
        }
        if (this.desc_info.preferred_city_group) {
          this.preferred_city_group = JSON.parse(this.desc_info.preferred_city_group)
        }
      })
    }
  },
  methods: {
  }
}
</script>
<style scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-col {
    margin: 2px 0 4px;
  }
  .el-card{
    margin: 2px 0 4px;
  }

  .label {
    text-align:right;
    color:#939393;
    font-weight:normal;
  }

</style>
